import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { RankingListWrapper } from './style'
import RankingHeader from '@/components/ranking-header'
import { useAppSelector } from '@/store'
import { formatMinuteSecond } from '@/utils/HandlerFormat'
import { getImageSize } from '@/utils/HandlerImg'
import {fetchPlayerDetailAction, fetchLyricAction} from '@/views/player/store/player'
import { useAppDispatch } from '@/store'
interface IProps {
  children?: ReactNode
}

const RankingList: React.FC<IProps> = () => {
  const { playList } = useAppSelector((state) => ({
    playList: state.ranking.playlist
  }))

  const tracks = playList.tracks || []
  const dispatch = useAppDispatch()
  const playSong = (id: number) => {
    dispatch(fetchPlayerDetailAction({ ids: id }))
    dispatch(fetchLyricAction({ id }))
  }

  return (
    <RankingListWrapper>
      <RankingHeader />
    <div className="play-list">
        <table>
          <thead>
            <tr className="header">
              <th className="ranking"></th>
              <th className="title">标题</th>
              <th className="duration">时长</th>
              <th className="singer">歌手</th>
            </tr>
          </thead>
          <tbody>
            {
              tracks.map((item, index) => {
                return (
                  <tr className="" key={item.id}>
                    <td>
                      <div className="rank-num">
                        <span className="num">{index + 1}</span>
                        <span className="new sprite_icon2"></span>
                      </div>
                    </td>
                    <td>
                      <div className="song-name">
                        {
                          index < 3 ?
                            (<img src={getImageSize(item.al.picUrl, 50)} alt="" />) : null
                        }
                        <span className="play sprite_table" onClick={() => playSong(item.id)}></span>

                        <span className="name">{item.name}</span>
                      </div>
                    </td>
                    <td>{formatMinuteSecond(item.dt)}</td>
                    <td>{item.ar[0].name}</td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
    </RankingListWrapper>
  )
}

export default memo(RankingList)
